import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { DarkModeRound, LightbulbOutlined } from '@vicons/material'

// 主题共享库
export const useThemeStore = defineStore(
    'theme',
    () => {
        // 是否为暗系主题
        const isDarkTheme = ref(false)

        // 主题（暗系于亮系，图标）
        const theme = computed(() => {
            return isDarkTheme.value ?
                {
                    name: darkTheme,
                    icon: LightbulbOutlined
                } : {
                    name: lightTheme,
                    icon: DarkModeRound
                }
        })

        /**
         * 改变主题
         * @param {Boolean} dark 是否暗系
         */
        const changeTheme = (dark) => {
            isDarkTheme.value = dark
        }

        return { isDarkTheme, theme, changeTheme }
    },
    {
        persist: {
            storage: localStorage, // 本地存储
            paths: ['isDarkTheme'], // 存储哪些数据
        }
    }
)